<template>
  <view class="content">
    <view class="head-wrap">
      <image class="head-wrap-img" src="/static/tabbar/basics.png" mode="" />
      <view class="head-wrap-content">
        以下将展示ggui官方<b>表单</b>组件的能力，组件样式仅供参考，开发者可以根据自身需求自定义组件样式，具体属性参数详见<navigator url="https://www.ggui.cn/">ggui开发文档</navigator>
      </view>
    </view>
    <gg-nav-group label="输入框" layout="col">
      <gg-cell label="输入框|文本输入键盘" sublabel="gg-input-text" url="/pages/form/gg-input-text" />
      <gg-cell label="输入框|数字输入键盘" sublabel="gg-input-number" url="/pages/form/gg-input-number" />
      <gg-cell label="输入框|身份证输入键盘" sublabel="gg-input-idcard" url="/pages/form/gg-input-idcard" />
      <gg-cell label="输入框|带小数点的输入键盘" sublabel="gg-input-digit" url="/pages/form/gg-input-digit" />
      <gg-cell label="输入框|密码输入" sublabel="gg-input-password" url="/pages/form/gg-input-password" />
      <gg-cell label="输入框|带按钮的文本输入框" sublabel="gg-input-btn" url="/pages/form/gg-input-btn" />
      <gg-cell label="输入框|地址选择输入" sublabel="gg-geo-local" url="/pages/form/gg-geo-local" />
    </gg-nav-group>
    <gg-nav-group label="多行输入框" layout="col">
      <gg-cell label="多行输入框" sublabel="gg-textarea" url="/pages/form/gg-textarea" />
    </gg-nav-group>
    <gg-nav-group label="单选框" layout="col">
      <gg-cell label="单选|性别选择" sublabel="gg-radio-sex" url="/pages/form/gg-radio-sex" />
      <gg-cell label="单选|自定义选项" sublabel="gg-radio" url="/pages/form/gg-radio" />
      <gg-cell label="单选|标签" sublabel="gg-radio-tag" url="/pages/form/gg-radio-tag" />
    </gg-nav-group>
    <gg-nav-group label="多选框" layout="col">
      <gg-cell label="多选框" sublabel="gg-checkbox" url="/pages/form/gg-checkbox" />
      <gg-cell label="多选标签" sublabel="gg-checkbox-tag" url="/pages/form/gg-checkbox-tag" />
    </gg-nav-group>
    <gg-nav-group label="下拉选择框" layout=" col">
      <gg-cell label="下拉选项" sublabel="gg-picker1" url="/pages/form/gg-picker1" />
      <gg-cell label="两级联动下拉选项" sublabel="gg-picker2" url="/pages/form/gg-picker2" />
      <gg-cell label="三级联动下拉选项" sublabel="gg-picker3" url="/pages/form/gg-picker3" />
      <gg-cell label="日期选择器" sublabel="gg-picker-date" url="/pages/form/gg-picker-date" />
      <gg-cell label="时间选择器" sublabel="gg-picker-time" url="/pages/form/gg-picker-time" />
      <gg-cell label="日期时间选择器" sublabel="gg-picker-datetime" url="/pages/form/gg-picker-datetime" />
      <gg-cell label="日期时间选择器 | 五级联动" sublabel="gg-picker-datetime5" url="/pages/form/gg-picker-datetime5" />
      <gg-cell label="省市区选择器" sublabel="gg-picker-region" url="/pages/form/gg-picker-region" />
    </gg-nav-group>
    <gg-nav-group label="滑块" layout=" col">
      <gg-cell label="滑块开关" sublabel="gg-switch" url="/pages/form/gg-switch" />
    </gg-nav-group>
    <gg-nav-group label="富文本编辑器" layout=" col">
      <gg-cell label="富文本编辑器" sublabel="gg-editor" url="/pages/form/gg-editor" />
    </gg-nav-group>
    <gg-nav-group label="内容显示框" layout=" col">
      <gg-cell label="内容显示框" sublabel="gg-info" url="/pages/form/gg-info" />
    </gg-nav-group>
    <gg-nav-group label="验证码" layout=" col">
      <gg-cell label="短信验证码" sublabel="gg-code-sms" url="/pages/form/gg-code-sms" />
    </gg-nav-group>
    <gg-nav-group label="按钮" layout=" col">
      <gg-cell label="按钮" sublabel="gg-button" url="/pages/form/gg-button" />
    </gg-nav-group>
    <gg-nav-group label="上传文件" layout=" col">
      <gg-cell label="头像上传" sublabel="gg-upload-avatar" url="/pages/form/gg-upload-avatar" />
      <gg-cell label="图片上传" sublabel="gg-upload-img" url="/pages/form/gg-upload-img" />
    </gg-nav-group>
    <gg-nav-group label="评价" layout=" col">
      <gg-cell label="评价" sublabel="gg-rate" url="/pages/form/gg-rate" />
    </gg-nav-group>
    <gg-nav-group label="规格" layout=" col">
      <gg-cell label="规格联动选择" sublabel="gg-specs" url="/pages/form/gg-specs" />
    </gg-nav-group>

  </view>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  onLoad() {
  },
  methods: {
    clickTest(e) {
      console.log(this.formData.checkboxtag)
    }
  }
}
</script>
